<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>个人中心 - 市立预约平台</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar">
			<div class="nav-logo">
				<img src="./static/imgs/logo.png" alt="市立助手">
				<span>市立预约平台</span>
			</div>
			<ul class="nav-links">
				<li><a href="index.html" class="active"><i class="fas fa-book-medical"></i>首页</a></li>
				<li><a href="chat.html"><i class="fas fa-comments"></i>智能预约</a></li>
				<li><a href="appointments.html"><i class="fas fa-calendar-check"></i> 预约管理</a></li>
				<li><a href="profile.html"><i class="fas fa-user"></i> 个人中心</a></li>
			</ul>
		</nav>

		<!-- 主布局 -->
		<div class="app-layout">
			<main class="profile-container">
				<div class="profile-card">
					<div class="profile-header">
						<img id="profileAvatar" src="./static/imgs/user.png" alt="用户头像" class="profile-avatar">
						<div>
							<h1 id="profileTitle" class="profile-title">加载中...</h1>
							<p id="profileSubtitle" class="profile-subtitle">用户ID: 加载中...</p>
						</div>
					</div>

					<div class="profile-info">
						<div class="info-group">
							<span class="info-label">用户名</span>
							<p id="infoUsername" class="info-value">加载中...</p>
						</div>
						<div class="info-group">
							<span class="info-label">真实姓名</span>
							<p id="infoRealName" class="info-value">加载中...</p>
						</div>
						<div class="info-group">
							<span class="info-label">性别</span>
							<p id="infoGender" class="info-value">加载中...</p>
						</div>
						<div class="info-group">
							<span class="info-label">出生日期</span>
							<p id="infoBirthDate" class="info-value">加载中...</p>
						</div>
						<div class="info-group">
							<span class="info-label">手机号</span>
							<p id="infoPhone" class="info-value">加载中...</p>
						</div>
						<div class="info-group">
							<span class="info-label">最近登录时间</span>
							<p id="infoLoginTime" class="info-value">加载中...</p>
						</div>
						<div class="info-group">
							<span class="info-label">身份证号</span>
							<p id="infoIdCard" class="info-value">加载中...</p>
						</div>
						<div class="info-group">
							<span class="info-label">注册时间</span>
							<p id="infoRegisterTime" class="info-value">加载中...</p>
						</div>
					</div>

					<div class="profile-actions">
						<button class="action-btn edit-btn" onclick="openEditModal()">
							<i class="fas fa-edit"></i> 编辑资料
						</button>
						<button class="action-btn change-password-btn" onclick="openPasswordModal()">
							<i class="fas fa-key"></i> 修改密码
						</button>
						<button class="action-btn logout-btn" id="logoutButton" style="display: none;">
							<i class="fas fa-sign-out-alt"></i> 退出登录
						</button>
					</div>
				</div>
			</main>
		</div>

		<!-- 退出确认模态框 -->
		<div id="logoutModal" class="modal">
			<div class="modal-content">
				<h3>确认退出登录</h3>
				<p>您确定要退出当前账号吗？</p>
				<div class="modal-actions">
					<button class="btn-cancel" onclick="closeModal('logoutModal')">取消</button>
					<button class="btn-confirm" onclick="confirmLogout()">确认退出</button>
				</div>
			</div>
		</div>

		<!-- 编辑资料模态框 -->
		<div id="editModal" class="modal">
			<div class="modal-content">
				<span class="close" onclick="closeModal('editModal')">&times;</span>
				<h2>编辑个人资料</h2>
				<form id="editForm">
					<div class="form-group">
						<label for="editUsername">用户名</label>
						<input type="text" id="editUsername" required readonly>
					</div>
					<div class="form-group">
						<label for="editRealName">真实姓名</label>
						<input type="text" id="editRealName" required>
					</div>
					<div class="form-group">
						<label for="editGender">性别</label>
						<select id="editGender" required>
							<option value="male">男</option>
							<option value="female">女</option>
						</select>
					</div>
					<div class="form-group">
						<label for="editBirthDate">出生日期</label>
						<input type="date" id="editBirthDate" required>
					</div>
					<div class="form-group">
						<label for="editPhone">手机号</label>
						<input type="tel" id="editPhone" required>
					</div>
					<div class="form-group">
						<label for="editIdCard">身份证号</label>
						<input type="text" id="editIdCard" required readonly>
					</div>
					<button type="submit" class="submit-btn">保存更改</button>
				</form>
			</div>
		</div>

		<!-- 修改密码模态框 -->
		<div id="passwordModal" class="modal">
			<div class="modal-content">
				<span class="close" onclick="closeModal('passwordModal')">&times;</span>
				<h2>修改密码</h2>
				<form id="passwordForm">
					<div class="form-group">
						<label for="currentPassword">当前密码</label>
						<input type="password" id="currentPassword" required>
					</div>
					<div class="form-group">
						<label for="newPassword">新密码</label>
						<input type="password" id="newPassword" required minlength="8">
					</div>
					<div class="form-group">
						<label for="confirmPassword">确认新密码</label>
						<input type="password" id="confirmPassword" required minlength="8">
					</div>
					<button type="submit" class="submit-btn">确认修改</button>
				</form>
			</div>
		</div>

		<script src="./js/auth.js"></script>
		<script src="./js/profile.js"></script>
	</body>
</html>